﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeFile="MultipleMarker.aspx.cs" Inherits="MultipleMarker" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" Runat="Server">
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<script type ="text/javascript">
    var contador = 1;
    var nombreTags = "tag";

    $(document).ready(function () {
        $("#<%=txtBuscarSucursales.ClientID %>").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: '<%=ResolveUrl("~/Mantenimientos/ServiciosAutocompletado.asmx/GetCustomers") %>',
                    data: "{ 'prefix': '" + request.term + "'}",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        response($.map(data.d, function (item) {
                            return {
                                label: item.split('-')[0],
                                val: item.split('-')[1]
                            }
                        }))
                    },
                    error: function (response) {
                        alert(response.responseText);
                    },
                    failure: function (response) {
                        alert(response.responseText);
                    }
                });
            },
            select: function (e, i) {
                $("#<%=hfCustomerId.ClientID %>").val(i.item.val);


            },
            minLength: 1
        });
    }


    );



    var map; var infowindow;
    function InitializeMap() {
        var latlng = new google.maps.LatLng(-34.906, -56.199);
        var myOptions =
        {
            zoom: 15,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map"), myOptions);
    }


    function markicons() {

        InitializeMap();

        var ltlng = [];

        ltlng.push(new google.maps.LatLng(-34.903301, -56.136889));
        ltlng.push(new google.maps.LatLng(-34.902301, -56.133889));
        ltlng.push(new google.maps.LatLng(-34.904901, -56.135189));
        ltlng.push(new google.maps.LatLng(-34.909301, -56.134889));


        map.setCenter(ltlng[0]);
        for (var i = 0; i <= ltlng.length; i++) {
            marker = new google.maps.Marker({
                map: map,
                position: ltlng[i]
            });

            (function (i, marker) {

                google.maps.event.addListener(marker, 'click', function () {

                    if (!infowindow) {
                        infowindow = new google.maps.InfoWindow();
                    }

                    infowindow.setContent("Message" + i);

                    infowindow.open(map, marker);

                });

            })(i, marker);

        }

    }

    window.onload = markicons; 

</script>
<h2>Multiple Markers Demo:</h2>
<div id ="map"   
        style="width: 896px; top: 51px; left: 32px; position: absolute; height: 400px">

</div>
</asp:Content>

